<template>
  <div>
    <ul class="daiying-con">
      <div v-for="item in jingdianlist" :key="item.id" class="item_con">
        <div class="mov">
          <div class="lk">
            <div class="lk-left">
              <img :src="item.img" alt="" />
            </div>
            <div class="lk-right">
              <div class="lk-right-1">
                <div>
                  <span>{{ item.nm }}</span>
                </div>
                <div>
                  <span>{{ item.enm }}</span>
                </div>
                <div class="zi">{{ item.cat }}</div>
                <div>{{ item.pubDesc }}上映</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "JingDian",
  data() {
    return {
      jingdianlist: [],
    };
  },
  mounted() {
    this.$axios.get("./json/jingdian.json").then((res) => {
      console.log(res);
      this.jingdianlist = res.data.classicMovies.list;
    });
  },
};
</script>

<style lang="less" scoped>
.item_con {
  display: flex;
}
.daiying-con {
  margin-top: 160px;
  background: #fff;
  overflow: hidden;

  img {
    width: 64px;
    height: 90px;
  }
  li {
    margin-bottom: 0.533333rem;
  }
}
.title_m {
  font-size: 0.373333rem;
  margin-left: 0.266667rem;
}
.lk {
  width: 100%;
  height: 3.04rem;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.lk-left img {
  width: 1.706667rem;
  height: 2.4rem;
  margin-left: -26px;
}

.lk-right {
  width: 240px;
  height: 2.346667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: -60px;
  // border-bottom: 1px solid #ccc;
}

.lk-right-1 {
  width: 5.5rem;
  height: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  color: #666;
  font-size: 0.346667rem;
  margin-left: -10px;
  position: relative;
}
.lk-right-1::after {
  content: "";
  display: inline-block;
  width: 8rem;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 2.666667rem;
}
.lk-right-1 > div:nth-child(1) {
  margin-top: -3px;
  display: flex;
}

.lk-right-1 > div:nth-child(1) > span:nth-child(1) {
  font-size: 0.453333rem;
  display: inline-block;
  color: #333;
  font-weight: 700;
  height: 22px;
  width: 5.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: start;
}

.lk-right-1 > div:nth-child(1) > span:nth-child(2) img {
  width: 1.146667rem;
  height: 0.373333rem;
  display: inline-block;
}

.eight {
  color: #666;
  font-size: 0.346667rem;
}

.zi {
  width: 5.333333rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lk-right-2 {
  width: 1.44rem;
  height: 0.746667rem;
  /* background: #f03d37; */
  border-radius: 1.266667rem;
  text-align: center;
  line-height: 0.746667rem;
  color: #fff;
  margin-right: -20px;
  font-size: 0.373333rem;
}
.mov {
  width: 100%;
}
</style>